<template>
  <div id="app">
    <div id="nav" class="">
      <div class="base-container">
        <router-link to="/">首页</router-link> |
        <router-link to="/config/web">界面配置</router-link> |
        <router-link to="/config/serve">服务配置</router-link>
        <div class="userinfo">
            <img src="@/assets/img/avatar.png" alt="" class="avatar"> Manny木
            <ul>
              <li>退出</li>
            </ul>
        </div>
      </div>
      
    </div>
    <div class="pages">
      <router-view/>
    </div>
  </div>
</template>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  min-width: 1200px;
}
.base-container{
  width: 80%;
  margin: 0 auto;
}
#nav {
  height: 60px;
  line-height: 60px;
  box-shadow:0 2px 4px 0 rgba(0,0,0,.05);
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  a {
    font-weight: bold;
    color: #2c3e50;
    margin-right: 10px;
    &.router-link-exact-active {
      color: #42b983;
    }
    &+a{
      margin-left: 10px;
    }
  }
  div.userinfo{
    float: right;
    height: 100%;
    position: relative;
    img.avatar{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      vertical-align: middle;
    }

    ul{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 60px;
      width: 100px;
      line-height: 26px;
      background: #fff;
      text-align: center;
      box-shadow:1px 1px 4px 0 rgba(0,0,0,.05);
      border-radius: 4px;
      overflow: hidden;
      display: none;
      li{
        color: #61affe;
        cursor: pointer;
        border-bottom: 1px solid #efefef;
        &:hover{
          color: #fff;
          background: #61affe;
        }
      }
    }

    &:hover{
      ul{
        display: block;
      }
    }
  }

 
}
 div.pages{
    padding-top: 70px;
  }
</style>
